<template>
  <div class="task-detail">
    <div class="toolbar">
      <div class="title">任务详情</div>
      <div>
        <el-button
          type="primary"
          round
          size="small"
          @click="$refs.FileManageDialog.ShowFileManageDialog()"
          >资料管理</el-button
        >
        <el-button
          type="primary"
          round
          size="small"
          @click="$refs.InfoDialog.ShowInfoDialog()"
          >完成候选人信息</el-button
        >
      </div>
    </div>
    <div class="top">
      <Card icon="1" class="card" title="任务单信息"
        >t
        <Item border>
          <div>
            <div class="label">报告号：</div>
            <div class="val">{{ taskModel.TaskNum }}</div>
          </div>
          <div>
            <div class="label">进行状态：</div>
            <div class="val">{{ taskModel.ParmTaskState }}</div>
          </div>
          <div>
            <div class="label">任务进度：</div>
            <div class="val">{{ taskModel.ParmTaskProgress }}</div>
          </div>
        </Item>
        <Item border>
          <div>
            <div class="label">入职机构：</div>
            <div class="val">{{ taskModel.INTENDEDAGENCY }}</div>
          </div>
          <div></div>
          <div>
            <div class="label">成本中心：</div>
            <div class="val">{{ taskModel.COSTCENTER }}</div>
          </div>
        </Item>
        <Item>
          <div>
            <div class="label">工作地点：</div>
            <div class="val">{{ taskModel.WORKPLACE }}</div>
          </div>
        </Item>
      </Card>
      <Card icon="2" class="card" style="margin: 0 12px" title="客户信息">
        <Item border>
          <div>
            <div class="label">客户名称：</div>
            <div class="val">{{ taskModel.CandidateName }}</div>
          </div>
          <div>
            <div class="label">客户联系人：</div>
            <div class="val">{{ taskModel.ContactName }}</div>
          </div>
          <div>
            <div class="label">联系电话：</div>
            <div class="val">{{ taskModel.CandidatePhone }}</div>
          </div>
        </Item>
        <Item border>
          <div>
            <div class="label">邮箱：</div>
            <div class="val">{{ taskModel.EMAIL }}</div>
          </div>
        </Item>
        <Item>
          <div>
            <div class="label">抄送邮箱：</div>
            <div class="val">{{ taskModel.MANY_EMAIL }}</div>
          </div>
        </Item>
      </Card>
      <Card icon="3" class="card" title="调查范围">
        <el-table
          class="my-table"
          :data="moduleList"
          :row-style="{
            height: ' 78px',
            backgroundColor: '#2C2E3F',
            fontSize: '14px'
          }"
          :cell-style="{ border: 'none' }"
          :header-cell-style="{ backgroundColor: '#2C2E3F', border: 'none' }"
        >
          <el-table-column prop="NAME" label="调查模块"> </el-table-column>
          <el-table-column prop="AdvicePrice" label="模块单价" width="80">
          </el-table-column>
          <el-table-column prop="LINE_NO" label="调查段数" width="80">
            <div slot-scope="s">{{ s.row.LINE_NO + 1 }}</div>
          </el-table-column>
        </el-table>
      </Card>
    </div>
    <Card icon="4" class="center" title="ESS进度">
      <el-steps :active="taskProgressDic.length" align-center>
        <el-step
          v-for="item in taskProgressDic"
          :key="item.OperationTitle"
          :title="item.OperationTitle"
          :description="DateTimeParse(item.C_DATETIME, 'YYYY-MM-DD HH:mm:ss')"
        >
        </el-step>
      </el-steps>
    </Card>
    <Card icon="5" class="bottom card" title="操作日志">
      <el-table
        class="my-table"
        :data="operationList"
        :row-style="{
          height: ' 78px',
          backgroundColor: '#2C2E3F',
          fontSize: '14px'
        }"
        :cell-style="{ border: 'none' }"
        :header-cell-style="{ backgroundColor: '#2C2E3F', border: 'none' }"
      >
        <el-table-column prop="OperationTitle" label="操作内容">
        </el-table-column>

        <el-table-column prop="C_DATETIME" label="操作时间">
          <div slot-scope="s">{{ DateTimeParse(s.row.C_DATETIME) }}</div>
        </el-table-column>
        <el-table-column prop="OperationDescription" label="进度状态">
        </el-table-column>
        <el-table-column prop="CREATOR_NAME" label="操作人"> </el-table-column>
      </el-table>
    </Card>
    <InfoDialog @editSuccess="editSuccess" ref="InfoDialog" />
    <FileManageDialog ref="FileManageDialog" />
  </div>
</template>

<script>
import Card from "./Card.vue";
import Item from "./Item.vue";
import InfoDialog from "./InfoDialog.vue";
import FileManageDialog from "./FileManageDialog.vue";
import { getTaskDetail } from "@/api/task/detail.js";
export default {
  data() {
    return {
      moduleList: [],
      operationList: [], //操作日志
      taskProgressDic: [],
      taskModel: {}
    };
  },
  methods: {
    editSuccess() {
      this.initData();
    },
    initData() {
      getTaskDetail({ taskNo: this.$route.query.id })
        .then(r => {
          this.taskModel = r.taskModel;
          this.moduleList = r.moduleList || [];
          this.taskProgressDic = r.taskProgressDic || [];
          this.operationList = r.operationList || [];
        })
        .catch(() => {});
    }
  },
  mounted: function() {
    this.initData();
  },
  components: { Card, Item, InfoDialog, FileManageDialog }
};
</script>
<style lang="scss">
.task-detail {
  .toolbar {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 16px;
      color: #fff;
    }
  }
  .top {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
    .card {
      flex: 1;
    }
  }
  .center {
    margin: 12px 0;
    padding-bottom: 32px;
    .el-step__icon.is-text {
      width: 28px;
      height: 28px;
      color: #fff;
      background: #5284ff;
      border-radius: 6px;
    }
    .is-process .el-step__icon.is-text {
      background: #fd5453;
    }
    .is-wait .el-step__line {
      background: #151720;
    }
    .is-wait .el-step__icon.is-text {
      background: #36394c;
      border: none;
    }
    .is-finish .el-step__line {
      background-color: #5284ff;
    }
    .is-process .el-step__line {
      background-color: #151720;
    }

    .el-step__title.is-finish,
    .el-step__description.is-finish {
      color: #fff;
    }
    .el-step__title.is-process,
    .el-step__description.is-process {
      color: #fd5453;
    }
    .el-step__title.is-wait,
    .el-step__description.is-wait {
      color: #787dab;
    }
  }
  .card {
    .label {
      color: #787dab;
      font-size: 13px;
    }
    .val {
      margin-top: 16px;
      font-size: 14px;
      color: #ffffff;
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background-color: #2a2d3a !important;
    }
  }
  .my-table {
    &:before {
      height: 0 !important;
    }
  }
}
</style>
